<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>Hello H5+</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/vconsole.min.js" ></script>
		<script type="text/javascript">
			//控制台
			new VConsole();
			var url ='http://47.106.98.87:8083/read?text='
			var talks=null;
			var dcontent=null;
			var audioplay=null;
			function startRecognize() {
				if(plus.os.name=='Android'&&navigator.userAgent.indexOf('StreamApp')>0){
					plus.nativeUI.toast('当前环境暂不支持语音识别插件');
					return;
				}
				var options = {};
				options.engine = 'iFly';
				//options.punctuation = false;	// 是否需要标点符号 
				outSet( "开始语音识别：" );
				plus.speech.startRecognize( options, function ( s ) {
					//语音识别成功
				}, function ( e ) {
					outSet( "语音识别失败："+e.message );
				} );
			}
			function startRecognizeEnglish(){
				if(plus.os.name=='Android'&&navigator.userAgent.indexOf('StreamApp')>0){
					plus.nativeUI.toast('当前环境暂不支持语音识别插件');
					return;
				}
				var options = {};
				
				options.engine = 'iFly';
				options.lang = 'en-us';
				outSet( "开始语音识别：" );
				plus.speech.startRecognize( options, function ( s ) {
					
				}, function ( e ) {
					outSet( "语音识别失败："+e.message );
				} );
			}
			function textRead(){
				this.addTalk('开始语音识别',parseInt(Math.random(1)*10)+1);
				console.log(parseInt(Math.random(1)*10)+1);
			}
			function addTalk(text,value){
				if(value>5){
					var li = document.createElement("li");
					li.setAttribute('class','layim-chat-mine')
					li.innerHTML="<div class='layim-chat-text'>hi,sweet</div>";
					talks.appendChild(li);
					dcontent.scrollTop=dcontent.scrollHeight;
				}else{
					var li = document.createElement("li");
					li.innerHTML="<div class='layim-chat-text'>hi,handsome man</div>";
					talks.appendChild(li);
					dcontent.scrollTop=dcontent.scrollHeight;
					audioplay.src=url+text;
				}
			}
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
		<style type="text/css">
			.talkButton{
				position: fixed;
				bottom: 5px;
				left: 0;
				text-align: center;
				width: 100%;
			}			
			.layim-chat-main {
			    height: 90%;
			    padding-top: 10px;
			    overflow-x: hidden;
			    overflow-y: auto;
			}
			.layim-chat-main ul li {
			    position: relative;
			    font-size: 0;
			    padding-left: 0px;
			    padding-right: 10px;
			    min-height: 68px;
			}
			.layim-chat-main ul .layim-chat-mine {
			    text-align: right;
			    padding-left: 0;
			}
			.layim-chat-text {
			    display: inline-block;
			    vertical-align: top;
			    font-size: 14px;
			}
			.layim-chat-mine .layim-chat-text {
			    margin-left: 0;
			    text-align: left;
			    background-color: #5FB878;
			    color: #fff;
			}
			.layim-chat-text {
			    position: relative;
			    line-height: 22px;
			    margin-top: 25px;
			    padding: 8px 15px;
			    background-color: #e2e2e2;
			    border-radius: 3px;
			    color: #333;
			    word-break: break-all;
			    max-width: 462px\9;
			}
			.layim-chat-text:after {
			    content: '';
			    position: absolute;
			    left: -10px;
			    top: 13px;
			    width: 0;
			    height: 0;
			    border-style: solid dashed dashed;
			    border-color: #e2e2e2 transparent transparent;
			    overflow: hidden;
			    border-width: 10px;
			}
			.layim-chat-mine .layim-chat-text:after {
			    left: auto;
			    right: -10px;
			    border-top-color: #5FB878;
			}
		</style>
	</head>
	
	<body onload="talks=document.getElementById('talks-content');dcontent=document.getElementById('dcontent');audioplay=document.getElementById('audio-play');">
		<header id="header">
			<div class="nvbt iback" onclick="back()"></div>
			<div class="nvtt">Speech</div>
			<div class="nvbt idoc" onclick="openDoc('Speech Document','/doc/speech.html')"></div>
		</header>
		<div class="layim-chat-main" id="dcontent">
			<ul id="talks-content">
				
			</ul>
		</div>
		<div class="talkButton">
			<div class="button" onclick="textRead()">OK</div>
		</div>
		<audio autoplay="true" id="audio-play" src=""></audio>
	</body>
	<script type="text/javascript" src="../js/immersed.js" ></script>
</html>